<template>
  <canvas ref="canvasRef"></canvas>
</template>

<script setup>
import { 
    WebGLRenderer, 
    Scene, 
    PerspectiveCamera, 
    BoxGeometry, 
    MeshPhongMaterial,
    Mesh,
    DirectionalLight
} from 'three'
import { onMounted,ref } from 'vue';

const canvasRef = ref(null);

console.log(canvasRef,1111);

onMounted(() => {
    console.log(1111)
    // 创建渲染器
    const renderer =new WebGLRenderer({ canvas: canvasRef.value })

    // 创建场景
    const scene = new Scene()

    // 创建镜头
    const camera = new PerspectiveCamera(75, 2, 0.1, 5)

    // 创建几何体
    const gepmetry = new BoxGeometry(1, 1, 1)

    // 创建材质
    const material1 = new MeshPhongMaterial({ color: 0x44aa88 })
    const material2 = new MeshPhongMaterial({ color: 0xc50d0d })
    const material3 = new MeshPhongMaterial({ color: 0x39b20a })

    // 创建网格
    const cube1 = new Mesh(gepmetry, material1)
    cube1.position.x = -2
    const cube2 = new Mesh(gepmetry, material2)
    const cube3 = new Mesh(gepmetry, material3)
    cube3.position.x = 2

    const cubes = [cube1, cube2, cube3]

    scene.add(cube1)
    scene.add(cube2)
    scene.add(cube3)


    // 创建光源
    const light = new DirectionalLight(0xFFFFFF, 1);
    light.position.set(-1, 2, 4)
    scene.add(light)

    camera.position.z = 2

    // 渲染出来
    renderer.render(scene, camera)

    // 自动旋转
    const rotate = (time) => {
        time = time * 0.001
        cubes.map(cube => {
            cube.rotation.x = time
            cube.rotation.y = time
        }) 
        renderer.render(scene,camera)
        window.requestAnimationFrame(rotate)
    }
    window.requestAnimationFrame(rotate)
})
</script>

<style>

</style>